<template>
    <drop-wrap :data="data" :index="index"  :element="element">
      <component :is="componentName" :element="element" :data="data" :index="index" ></component>
    </drop-wrap>
</template>

<script>
  import { designTable, presentTable } from "./components/"
  export default {
    props: ['element', 'data', 'index'],
    inject: ['model'],
    components: { designTable, presentTable },
    data () {
      return {
        componentName: this.model == 'design' ? 'designTable' : 'presentTable',
      }
    },
    computed:{
      store () {
        return this.element.getRoot();
      },
    }
  }
</script>

<style scoped>
>>> .el-table--enable-row-transition .el-table__body td.el-table__cell {
  height: 40px;
  line-height: 40px;
  padding: 0;
}
>>> .el-input__inner {
  height: 32px;
  line-height: 32px;
}
>>> .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
</style>
